<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入内容(最多120字)" maxlength="120" v-model="commContent"></textarea>
        <mt-button type="primary" size="large" @click="submitComme">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for= "(n,i) in comments" :key="n.add_time">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户:{{n.user_name}}&nbsp;&nbsp;发表时间:{{n.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                     {{!!!n.content ? '此用户很懒，嘛都没说': n.content }} 
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from "mint-ui"
    export default{
        data(){
            return{
                commContent:"",
                pageIndex:1,
                comments:[
                    {
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:30.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:31.000Z",
                        content:""
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:32.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:33.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:34.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:35.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:36.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:09:37.000Z",
                        content:"我来评论一下！"
                    }
                ],
                moreData:[
                    {
                        user_name:"匿3名用户",
                        add_time:"2015-04-19T20:09:39.000Z",
                        content:"33我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:10:31.000Z",
                        content:"33我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:01:32.000Z",
                        content:"我33来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:01:33.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:08:34.000Z",
                        content:"我来33评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:07:35.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:03:36.000Z",
                        content:"我来评论一下！"
                    },{
                        user_name:"匿名用户",
                        add_time:"2015-04-19T20:04:37.000Z",
                        content:"我来评论一下！"
                    }
                    ]
            };
        },
        props:["id"],
        methods:{
            submitComme(){
                if(this.commContent.length === 0){
                    return Toast("评论不能为空!");
                }
              this.comments.unshift({
                  user_name:"zzz",
                  add_time: new Date().toISOString(),
                  content:this.commContent.trim()
              })
              this.commContent = "";
            },
            getComments(){
                this.$http.get("api/getcomments/"+this.id+"?pageindex="+
                this.pageIndex).then(res=>{
                    if(res.body.status === 0){
                      this.comments = res.body.message;
                    }else{
                        Toast("获取评论失败!");
                    }
                })
            },
            getmore(){
                 this.pageIndex ++;
                 this.comments = this.comments.concat(this.moreData);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        hr{
            margin: 0;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                font-size: 13px;

                .cmt-title{
                    line-height: 30px;
                    background-color: #ccc;
                }
                .cmt-body{
                    line-height: 30px;
                    text-indent: 2em;
                }
            }
        }
    }
    
</style>